<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}
import { defineEmits, ref, defineExpose, defineProps } from 'vue';
import { useTeamStore } from '@/store/index'
import { authAdmin, showToast } from '@/public/index'
import Bottom from '@/components/bottom/index.vue'
const { isShow, title, type } = defineProps({
    isShow: {
        type: Boolean,
        default: () => false
    },
    title: {
        type: String,
        default: () => '请选择要查看的团队'
    },
    type: {
        type: String,
        default: () => ''
    }
});

const teamStore = useTeamStore();
const emits = defineEmits(['confirm', 'close','staffChange'])
/**
 * @property 变量
 */
// 经理列表
const manageList = ref<Array<TeamItem>>([]);
//团队列表
const teamList = ref<Array<TeamItem>>([]);
// 员工列表
const staffList = ref<Array<TeamItem>>([]);
// 团队id 
const teamId = ref<string>('');
// 经理id
const manageId = ref<string>('')
// 点击的员工id
const staffId = ref<string>('')
/**
 * @property  所有请求以api开头 如:apiDataInfo
 */
const apiManageList = async () => {
    if (teamList.value.length) return; 
    if (authAdmin()) {
        const managRes = await teamStore.apiManagerList();
        if (managRes.code !== 0 || managRes.data.list.length===0) {
            showToast('请联系管理人员业务经理列表为空')
            return uni.hideLoading()
        };
        manageList.value = managRes.data.list
        manageId.value = manageList.value[0]?.id as string
        teamStore.setManagerId(manageId.value);
    }

    await apiTeamList()

}
// 获取团队
const apiTeamList = async () => {
    const teamRes = await teamStore.apiTeamList();
    teamList.value = teamRes.data.list;
}
//获取员工列表
const apiStaffList = async () => {
    const staffRes = await teamStore.apiStaffList();
    staffList.value = staffRes.data?.list || [];
}

/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
const clickConfirm = () => {
    //确定
    if (!teamId.value) return showToast('请您选择团队')
    if (type === 'footprint' && !staffId.value) return showToast('请选择员工')
    // if (teamId.value === teamStore.teamId && type !== 'footprint') return emits('close');
    if (type === 'footprint' && !teamStore.recordTime) return showToast('请选择时间')
    teamStore.setManagerId(manageId.value); //业务经理id
    teamStore.setTeamId(teamId.value); // 团队id
    teamStore.staffId = staffId.value; //员工id
    emits('confirm', {
        team: teamList.value.find(item => item.id === teamId.value)?.name,
        manage: manageList.value.find(item => item.id === manageId.value)?.name,
        staff: staffList.value.find(item => item.id === staffId.value)?.name,
    })
    emits('close')
}
// 点击团队
const clickTeam = (id: string | number) => {
    teamId.value = id as string
    // 清空员工id
    staffId.value = '';
    // 员工列表
    staffList.value = []
    if (type === 'footprint') apiStaffList();
}
// 点击经理
const clickManage = (id: string | number) => {
    if (id === teamStore.managerId) return;
    manageId.value = id as string
    teamStore.setManagerId(id as string);
    // 清空员工id及团队经理id
    teamId.value = '';
    staffId.value = '';
    // 团队列表
    teamList.value = [];
    // 员工列表
    staffList.value = []
    apiTeamList()
}
// 点击员工
const clickStaffId=(id:string)=>{
    staffId.value=id;
    emits('staffChange',id)
}
/**
 * @property 内置方法
 */
defineExpose({
    apiManageList
})

</script>
<template>
    <div class="over" v-if="isShow" :catchtouchmove="true">

    </div>
    <up-popup :show="isShow" mode="top" safeAreaInsetTop :closeOnClickOverlay="false" :safeAreaInsetBottom="false"
        :overlay="false">
        <div :catchtouchmove="true">
            <div class="h-[44px] text-center font-size-32">
                {{ title }}
            </div>
            <div class="w-[100%] h-200 flex">
                <div class="w-[50%] h-[100%] flex flex-col" style="border-right: 2rpx solid #D8D8D8;"
                    v-if="authAdmin()">
                    <div class="title ">
                        业务经理
                    </div>
                    <div class="flex-1 overflow-hidden">
                        <scroll-view scroll-y class="w-[100%] h-[100%]">
                            <div v-for="item in manageList" :key="item.id" @click="clickManage(item.id)" :style="{
                                color: manageId === item.id ? '#FF851A' : '#000'
                            }" class="text-center">
                                <text style="line-height: 48rpx;" class="font-size-28">{{ item.name }}</text>
                            </div>
                        </scroll-view>
                    </div>

                </div>
                <div class="w-[50%] h-[100%] flex flex-col">
                    <div class="title">
                        团队
                    </div>
                    <div class="flex-1 overflow-hidden">
                        <scroll-view scroll-y class="w-[100%] h-[100%]">
                            <div v-for="item in teamList" :key="item.id" @click="clickTeam(item.id)" :style="{
                                color: teamId === item.id ? '#FF851A' : '#000'
                            }" class="text-center">
                                <text style="line-height: 48rpx;" class="font-size-28">{{ item.name }}</text>
                            </div>
                        </scroll-view>
                    </div>
                </div>
                <div class="w-[50%] h-[100%] flex flex-col" v-if="type === 'footprint'"
                    style="border-left: 2rpx solid #D8D8D8;">
                    <div class="title">
                        员工
                    </div>
                    <div class="flex-1 overflow-hidden">
                        <scroll-view scroll-y class="w-[100%] h-[100%]">
                            <div v-for="item in staffList" :key="item.id" @click="clickStaffId(item.id)" :style="{
                                color: staffId === item.id ? '#FF851A' : '#000'
                            }" class="text-center">
                                <text style="line-height: 48rpx;" class="font-size-28">{{ item.name }}</text>
                            </div>
                        </scroll-view>
                    </div>
                </div>
            </div>
            <slot name="other" :seaff="staffId" />
            <div class="w-[100%] pl-4 pr-4 pb-3 h-100 mt-3 flex">
                <div class="h-[100%] but flex-1 mr-4 fc font-size-24" v-if="teamStore.teamId" @click="emits('close')">
                    取消
                </div>
                <div class="flex-1 ">
                    <Bottom @click="clickConfirm" />
                </div>

            </div>
        </div>

    </up-popup>
</template>
<style lang="scss" scoped>
.but {
    border: 2rpx solid #275EFF;
    border-radius: 64rpx;
    color: #275EFF;
}

.title {
    width: 100%;
    line-height: 46rpx;
    color: #275EFF;
    border-bottom: 2rpx solid #f2f2f2;
    text-align: center;
}

.over {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10073;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
</style>